<style>
        a:hover{
                text-decoration:none;
        }
        .dirline{
                width:100%; border-top: 1px dotted #999; margin-top: 10px; padding-bottom: 10px; height:1px;
        }
        .tab-pane{
                margin-top:20px;
        }
        .cross{
                text-align: center;
                color:red;
                position: absolute;
                margin-left: 180px;
                margin-top:0px;
                height:18px;
                width:18px;
                z-index: 99;
                background: #FFF;
                border:2px solid red;
                border-radius: 50%;
                font-size: 14px;
                font-weight: bold;
        }
        .cross:hover{
                color:red;
                box-shadow: 0 0 6px red;
        }
</style>
<div class="bjui-pageHeader">
        <div class="bjui-searchBar">
                <ul >
                        <li>
                                <a id="add_ten" href="javascript:;" class="btn btn-green" data-icon="plus">添加客服QQ</a>
                        </li>
                </ul>
        </div>
</div>
<div class="bjui-pageContent" >
        <div data-layout-h="0">
                <!-- 内容区 -->
                <form action="{:U('Operating/tenqq')}"  class="pageForm nice-validator n-red"   data-loadingmask='false' data-toggle="validate" novalidate="novalidate" method="post" >
                        <ul class="dragsort" id="ten_drag" style="margin-top:10px;">
                                {volist name='qq' id='vo'}
                                <li>

                                        <div class="panel panel-default">                                                                        
                                                <div class="panel-heading panelContent"> 
                                                        <h4 class="panel-title">
                                                                客服QQ
                                                                <a class="cross" style="margin-left:0px; right:30px;color:red;" href="javascript:;" id="delete">X</a>
                                                        </h4>
                                                </div>
                                                <div class="panel-collapse panelContent collapse in">
                                                        <table style="margin-left:20px;">
                                                                <tr>
                                                                        <th width="100">咨询人名称：</th>
                                                                        <td><input type="text" name="ten[#index#][name]" size='50' value="{$vo.name|default=''}" /></td>
                                                                </tr>
                                                                <tr>
                                                                        <th width="100">QQ号码：</th>
                                                                        <td><input type="text" name="ten[#index#][qq]" size='50' value="{$vo.qq|default=''}" /></td>
                                                                </tr>
                                                        </table>
                                                </div>
                                        </div>
                                </li> 
                                {/volist}
                        </ul>
                </form>
        </div>

</div>
<script id="tenTemplate" type="text/html">
        <li>

                <div class="panel panel-default">                                                                        
                        <div class="panel-heading panelContent"> 
                                <h4 class="panel-title">
                                        客服QQ
                                        <a class="cross" style="margin-left:0px; right:30px;color:red;" href="javascript:;" id="delete">X</a>
                                </h4>
                        </div>
                        <div class="panel-collapse panelContent collapse in">
                                <table style="margin-left:20px;">
                                        <tr>
                                                <th width="100">咨询人名称：</th>
                                                <td><input type="text" name="ten[#index#][name]" /></td>
                                        </tr>
                                        <tr>
                                                <th width="100">QQ号码：</th>
                                                <td><input type="text" name="ten[#index#][qq]" /></td>
                                        </tr>
                                </table>
                        </div>
                </div>
        </li> 
</script>
<div class="bjui-pageFooter" border='none'>
        <ul>
                <li><button type="button" class="btn btn-close">关闭</button></li>
                <li><button type="submit" onclick="updateTen()" class="btn btn-default">提交</button></li>
        </ul>
</div>
<script type="text/javascript">
        $(function() {

                $("#add_ten").click(function() {
                        var html = $(template("tenTemplate", {})).html();
                        $("#ten_drag").prepend('<li>'+html+'</li>').initui();
                });
                $("#ten_drag").on('click', '#delete', function() {
                        $(this).parents(".panel").remove();
                        return false;
                });
        });

        function updateTen() {
                $("#ten_drag").find(".panel").each(function(i) {
                        $(':input', this).each(function() {
                                var $this = $(this), name = $this.attr('name');
                                if (name)
                                        $this.attr('name', name.replaceSuffix(i));
                        });
                });
        }
        $("#ten_drag").dragsort({
                dragSelector: "div",
                dragBetween: false,
                dragSelectorExclude: "a.cross,div.panel-collapse,i",
                placeHolderTemplate: "<li><div></div></li>",
                scrollSpeed: 5
        });
</script>
